.neo-animate-dialog {
    // default styling to match buttons, since this is the most common use case
    background-color: var(--button-background-color);
    background-image: var(--button-background-image);
    border          : var(--button-border-active);

    position: fixed;
    z-index : 1000;

    transition-duration       : 250ms;
    transition-property       : height, left, top, transform, width;
    transition-timing-function: ease-out;

    &.neo-hide {
        transform          : none !important;
        transition-property: height, left, top, width;
    }
}

.neo-dialog-modal-mask {
    position         : fixed;
    top              : 0;
    left             : 0;
    bottom           : 0;
    right            : 0;
    background-color : rgba(100, 100, 100, 0.5);
    backdrop-filter  : blur(1px);
    z-index          : 1000;
}

.neo-dialog {
    border        : 1px solid var(--dialog-border-color);
    box-shadow    : var(--dialog-box-shadow);
    display       : flex;
    flex-direction: column;

    &.animated-hiding-showing {
        transition-duration       : 200ms;
        transition-property       : height, left, top, transform, width;
        transition-timing-function: ease-out;
    }

    &.neo-dragproxy {
        > * {
            height: fit-content;
        }
    }

    &.neo-maximized {
        height   : 98% !important;
        left     : 1%  !important;
        top      : 1%  !important;
        transform: none!important;
        width    : 98% !important;

        &.neo-panel {
            .neo-header-toolbar {
                &.neo-draggable {
                    cursor: default;
                }
            }
        }
    }

    &.neo-panel {
        .neo-footer-toolbar {
            border    : none;
            border-top: 1px solid var(--dialog-border-color);
        }

        .neo-header-toolbar {
            border       : none;
            border-bottom: 1px solid var(--dialog-border-color);

            .neo-button {
                border      : 0;
                margin-right: 0.3em;
                padding     : 0;

                &:active {
                    border: none !important;
                }

                &:last-child {
                    margin-right: 0;
                }
            }

            .neo-button-glyph {
                color    : var(--dialog-icon-color);
                font-size: 1.8em;
            }

            .neo-panel-header-text {
                color         : var(--dialog-header-color);
                overflow      : hidden;
                pointer-events: none;
                text-overflow : ellipsis;
                user-drag     : none; // not supported yet
                user-select   : none;

                -webkit-user-drag: none;
            }

            &.neo-draggable {
                cursor: move;
            }
        }
    }
}

// A focusable, but zero-sized element used to grab and redirect focus in focus-trapped modals
.neo-focus-trap {
    clip    : rect(0, 0, 0, 0);
    position: absolute;
}
